<template>
  <a-upload
      v-model:file-list="fileList"
      name="file"
      :action="uploadUrl"
      :customRequest="customRequest"
      :headers="headers"
      @change="handleChange"
  >
    <a-button>
      <upload-outlined/>
      点击上传
    </a-button>
  </a-upload>
</template>

<script setup>


//
import {ref} from "vue";
import {message} from "ant-design-vue";
import {useUserStore} from "/@/store/modules/system/user.js";
import {SmartLoading} from "/@/components/framework/smart-loading/index.js";
import {fileApi} from "/@/api/support/file-api.js";
import {smartSentry} from "/@/lib/smart-sentry.js";
import {
  consumablesPurchaseApprovalApi
} from "/@/api/business/consumables-purchase-approval/consumables-purchase-approval-api.js";

const Props = defineProps({
  uploadUrl:{
    type:String,
    default:''
  },

})

const emit = defineEmits(['change']);


const fileList = ref([]);



const headers = {
  'x-access-token': useUserStore().getToken
};

const customRequest = async (options) => {
  SmartLoading.show();
  try {
    console.log(options);
    const formData = new FormData();
    formData.append('file', options.file);
    let res = await consumablesPurchaseApprovalApi.uploadExcel(formData);
    let file = res.data;
    fileList.value.push(file);
    emit('change', fileList.value);
  } catch (e) {
    smartSentry.captureError(e);
  } finally {
    SmartLoading.hide();
  }
};

const handleChange = info => {
  if (info.file.status !== 'uploading') {
    console.log(info.file, info.fileList);
  }
  if (info.file.status === 'done') {
    message.success(`${info.file.name} file uploaded successfully`);
  } else if (info.file.status === 'error') {
    message.error(`${info.file.name} file upload failed.`);
  }
};
</script>

